<template>
  <view class="page">
    <Header> </Header>
    <view class="main_container">
      <view class="main_content">
        <Breadcrumb :text="'主页-语法速通'"></Breadcrumb>
        <RouterTabs :list="routerList" :current="0"> </RouterTabs>
        <view class="content">
          <view class="box">
            <view class="select">
              <view
                class="select_content"
                v-for="(item, index) in grammarList"
                :key="index"
              >
                <view class="select_box" @click="handleSelectGrammar(item)">
                  <text>{{ item.itemName }}</text>
                  <view class="select_icon">
                    <u-icon
                      name="arrow-down-fill"
                      color="#333333"
                      size="28"
                    ></u-icon>
                  </view>
                </view>
              </view>
              <u-select
                v-model="show"
                mode="single-column"
                :list="list"
                value-name="id"
                label-name="conceptName"
                @confirm="confirm"
              ></u-select>
            </view>
            <view class="button">
              <view
                class="button_content"
                :class="{ active: period === '1' }"
                @click="handleChangePeriod('1')"
              >
                <text>小学语法树</text>
              </view>
              <view
                class="button_content"
                :class="{ active: period === '2' }"
                @click="handleChangePeriod('2')"
              >
                <text>初中语法树</text>
              </view>
              <view
                class="button_content"
                :class="{ active: period === '3' }"
                @click="handleChangePeriod('3')"
              >
                <text>高中语法树</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { grammarItem } from "@/api/grammar";
export default {
  components: {},
  data() {
    return {
      routerList: [
        {
          name: "语法框图",
          url: "pages/grammar/grammarDiagram",
        },
        {
          name: "自主组卷",
          url: "pages/grammar/grammarPaper",
        },
        {
          name: "错题本",
          url: "pages/grammar/grammarBook",
        },
      ],
      period: "1",
      grammarList: [],
      show: false,
      list: [],
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    init() {
      // default
      this.handleChangePeriod();
    },
    handleChangePeriod(id) {
      if (id === this.period) return;
      if (id) this.period = id;
      let params = {
        period: this.period,
      };
      grammarItem(params).then((res) => {
        this.grammarList = res.data;
      });
    },
    handleSelectGrammar(item) {
      this.list = item.concepts;
      this.show = true;
    },
    confirm(e) {
      uni.navigateTo({
        url: `/pages/grammar/grammarDiagramDetail?conceptId=${e[0].value}`,
      });
    },
  },
};
</script>
<style scoped lang="scss">
@import "./grammarDiagram";
</style>
